<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>06_列表渲染</title>
</head>

<body>

  <!--
1. 列表显示
  数组: v-for / index
  对象: v-for / key
2. 列表的更新显示
  删除item
  替换item
-->

  <div id="demo">
    <h2>测试: v-for 遍历数组</h2>

    <ul>
      <!-- 
        遍历元素必须添加一个key属性，
        key属性的值需要是唯一的，有id用id，没有id考虑用index（index存在问题要注意） 
      -->

      <!-- 
        问题： 
          key="item.id"  item.id是字符串，也就是说，
          所有key的值都是一个叫做item.id，所有key都相等了
      -->
      <!-- <li v-for="(item, index) in persons" key="item.id"> -->
      <!-- <li v-for="(item, index) in persons" :key="item.id">
        {{item.name}} - {{item.age}}
      </li> -->

      <!-- 括号可以省略 -->
      <!-- <li v-for="item, index in persons" :key="item.id">
        {{item.name}} - {{item.age}}
      </li> -->

      <!-- index也可以省略 -->
      <li v-for="item in persons" :key="item.id">
        {{item.name}} - {{item.age}}
      </li>
    </ul>

    <h2>测试: v-for 遍历对象</h2>
    <ul>
      <!-- 遍历对象用key作为key的值，因为对象的key是不重复的（唯一的） -->
      <li v-for="value, key in person" :key="key">
        {{key}} - {{value}}
      </li>
    </ul>

    <ul>
      <li v-for="item,index in str" :key="index">
        {{item}}
      </li>
    </ul>

    <ul>
      <li v-for="item,index in num" :key="index">
        {{item}}
      </li>
    </ul>
  </div>

  <script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#demo',
      data: {
        /*
          发送请求，获取数据，需要在页面展示
            react -> map
            vue -> v-for
        */
        persons: [
          { id: 1, name: '海静', age: 66 },
          { id: 2, name: '舒健', age: 55 },
          { id: 3, name: '森翰', age: 33 },
          { id: 4, name: '舒文', age: 18 },
        ],
        person: {
          name: 'jack',
          age: 20
        },
        str: 'hello atguigu',
        num: 10
      }
    })
  </script>
</body>

</html>